<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>更换图片</title>
		<style>
		#d3{
			border: 10px red solid;
		}
		</style>
		<script>
		function show1(){
			var p=document.getElementById("d1");
			d1.setAttribute("height","50%");
			d1.setAttribute("width","50%");
			d1.setAttribute("src","dog.jpg");
		}
		function show2(){
			var p=document.getElementById("d1");
			d1.setAttribute("height","150%");
			d1.setAttribute("width","150%");
			d1.setAttribute("src","mai.jpg");
		}
		function addImg(){
			var d3=document.getElementById("d3");
			var ig=document.createElement("img");
			ig.setAttribute("src","2.jpg");
			d3.appendChild(ig);
		}
		function addImg2(){
			var d3=document.getElementById("d3");
			var ig=document.createElement("img");
			ig.setAttribute("src","3.jpg");
			document.body.insertBefore(ig,d3);
			 
		}
		function cloneImg(){
			var d3=document.getElementById("d3").cloneNode(true);
			document.body.appendChild(d3);
		}
		function delNode(){
			document.body.removeChild(document.body.lastElementChild);
			//document.body.removeChild(document.getElementById("p5"));
		}
		</script>
	</head>
	<body>
		<img src="dog.jpg" id="d1" >
		<div>
			<input type="radio" checked name="img" onclick="show1()">狗狗<input type="radio" onclick="show2()" name="img">大雾
		</div>
		<div id="d2">
			<input type="button" value="添加一个图片" onclick="addImg()">
			<input type="button" value="添加一个图片到div前面" onclick="addImg2()">
			<input type="button" value="克隆div" onclick="cloneImg()">
			
			<input type="button" value="删除最后一个元素" onclick="delNode()">
		</div>
		<div id="d3">
			<img src="1.jpg" id="p5"/>
		</div>
	</body>
</html>
